<template>
    <div class="faqVue flex_column">
        <div class="flex_between">
            <el-input placeholder="输入您遇到的问题" v-model="key"></el-input>
            <div class="btn" @click="getList">搜索</div>
        </div>
        <div class="flex" style="margin-top: 10px;">
            <el-tag :type="tagId===item.id ? '' : 'info'" v-for="(item, index) in searchs" :key="index" @click="tagId=item.id; getList()" style="margin-right: 10px;" :closable="tagId===item.id" @close="tagId=''; getList()">{{ item.name }}</el-tag>
        </div>

        <div class="inner margin10 flex_1">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="flex_between align_center">
                    <div class="question">{{ item.question }}</div>
                    <el-tag type="info" style="margin-right: 0;">{{ item.tagName }}</el-tag>
                </div>
                <div class="content" v-html="item.answer"></div>
                <div class="flex" style="margin-top: 15px;">
                    <el-tag :type="item.canUseful ? 'success': 'info'" style="margin-right: 10px;" @click="usefullFun(0, item)">有帮助  {{ item.usefulNum }}</el-tag>
                    <el-tag :type="item.canUseless ? 'warning' : 'info'" style="margin-right: 0;" @click="usefullFun(1, item)">没帮助 {{ item.uselessNum }}</el-tag>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        data(){
            return {
                key: "",
                searchs: [],
                tagId: "",
                list: []
            }
        },
        created(){
            this.getTagList()
            this.getList()
        },
        watch: {
            key(){
                if(!this.key) this.getList()
            }
        },
        methods: {
            getTagList(){
                this.$post("/front/help/faqTagList").then(res=>{
                    this.searchs = res.data.obj
                })
            },
            getList(){
                this.$post("/front/help/faqList", {
                    tagId: this.tagId,
                    searchStr: this.key
                }).then(res=>{
                    this.list = res.data.obj.list
                })
            },
            usefullFun(index, item){
                if(item.canUseful && item.canUseless) {
                    let url = ["/front/help/faqUseful", "/front/help/faqUseless"][index]
                    this.$post(url,{
                        id: item.id
                    }).then(res=>{
                        if(res.data.code===0) {
                            this.getList()
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
:deep(.el-tag--info) {
    margin-right: 10px;
    cursor: pointer;
}
.faqVue {
    width: 100%;
    height: 100%;
    padding: 20px 20px 10px;
    
    .btn {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #0147fd;
        border-radius: 4px;
        color: #fff;
        margin-left: 20px;
        cursor: pointer;
    }
    .inner {
        width: 100%;
        overflow: scroll;
        .item {
            width: 100%;
            border: 1px solid #DCDFE6;
            margin-bottom: 10px;
            padding: 15px;
            .content {
                padding-top: 15px;
                line-height: 1.4 !important;
            }
        }
    }
    .inner::-webkit-scrollbar {
        width: 0;
        height: 0;
    }  
}  

</style>